<%@page import="java.sql.*"%>
<%@ page import="planning.metier.*" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%  %>
<%	I_Planning planning = new Planning();	%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="texte-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="jquery-ui-1.10.0.custom.css" />
<link href="index.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.9.0.js"></script>
<script src="jquery-ui-1.10.0.custom.js"></script>
<script>
function suppr(id){
	if(confirm("Voulez-vous supprimer cette UserStory ?")){
		$.post("BdDeleteUS", {
			id : id,
		}).complete(function() { $("#"+id).remove(); });
	}
}
function detail(id){
	$("<div>").load("BdDetailUS?id="+id, function() {
	    $(this).dialog({
	       height: 'auto',
	       width:'auto',
	       modal: true,
	       title: "Détail UserStory",
	       buttons: {
		   	'Editer': function() {
		        		$(this).dialog('close');
		        		edit(id);
			      },
			'Fermer': function() {
				$(this).dialog('close');
	          }
	       }
	    });
	});
}
function edit(idus){
	$("<div>").load("BdEditUS?id="+idus, function() {
	    $(this).dialog({
	       height: 'auto',
	       width:'auto',
	       modal: true,
	       title: "Editer UserStory",
	       buttons: {
	    	'Enregistrer': function() {
	        	if(confirm("Voulez-vous enregistrer vos modifications ?")){
	        		$.post("BdSaveUS", {
	        			id : idus,
	        			titre : $("#titreUS").val(),
	        			andon :$("#andonUS").is(":checked"),
	        			desc : $("#descUS").val()
	        		}).complete(function() { 
	        			location.reload();
	        		});
	        		$(this).dialog('close');
	        	}
		      },
			'Fermer': function() {
				$(this).dialog('close');
	          }
	       }
	    });
	});
}
function help(id){
	
	$.post("BdAndonUS", {
		id : id,
	}).complete(function() {
		
		if(document.getElementById("img-andon"+id).src.match("no_help.png")){
			document.getElementById("img-andon"+id).src = "images/help.gif";
		}else{
			document.getElementById("img-andon"+id).src = "images/no_help.png";
		}
	
	});
}
var idToolUs;
	$(function() {
		var menu = $("#menu");
		var app =$("#app");
		var position = { my : "left top", at : "left bottom", of : $(".toolbox")};
		var icons = { primary: "ui-icon-wrench", secondary : "ui-icon-triangle-1-s"};
		menu.hide().menu();
		app.hide().menu();
		
		$("#b2").button();
		$("#b3").button();
		//drag and drop
		$(".column").sortable({
			connectWith : ".column",
			items: ".user-story",
			start : function(event, ui) {
				menu.hide();
				$('.user-story').css('cursor', '-moz-grabbing');
				item = ui.item;
				newList = oldList = ui.item.parent();
			},
			stop : function(event, ui) {
				$('.user-story').css('cursor', '-moz-grab');
				$.post("BdDragNDropUS", {
					columnold : oldList.attr('id'),
					listold : ""+$("#"+oldList.attr('id')).sortable("toArray"),
					columnnew : newList.attr('id'),
					listnew : ""+$("#"+newList.attr('id')).sortable("toArray")
				});
			},
			change : function(event, ui) {
				if (ui.sender)
					newList = ui.placeholder.parent();
			},
		});
		//Menu us
		$(".toolbox").button({icons : icons, text : false}).click(function() {
			idToolUs = $(this.parentNode).attr('id');
			menu.show().position({ my : "left top", at : "left bottom", of : this});
			$(document).one("click", function() {menu.hide();});
			return false;
		});
		//Menu application
		$("#ba").button({icons : { primary: "ui-icon-calculator", secondary : "ui-icon-triangle-1-s"}}).click(function() {
			idToolUs = $(this.parentNode).attr('id');
			app.show().position({ my : "left top", at : "left bottom", of : this});
			$(document).one("click", function() {app.hide();});
			return false;
		});
	});
</script>
<title>ScrumBoard</title>
</head>
<body>
	<ul id="menu">
		<li><a id="m1" onclick="javascript: detail(idToolUs); return false;" href=""><span class="ui-icon ui-icon-search"></span>Detail</a></li>
		<li><a id="m2" onclick="javascript: help(idToolUs); return false;" href=""><span class="ui-icon ui-icon-help"></span>Andon</a></li>
		<li><a id="m3" onclick="javascript: suppr(idToolUs); return false;" href=""><span class="ui-icon ui-icon-trash"></span>Supprimer</a></li>
		<li><a id="m4" onclick="javascript: edit(idToolUs); return false;" href=""><span class="ui-icon ui-icon-pencil"></span>Editer</a></li>
	</ul>
	<ul id="app">
		<li><a id="app1" href="/agilespider_dashboard19-02-2013V2/"><span class="ui-icon ui-icon-image"></span>DashBoard</a></li>
		<li><a id="app2" href="/AgileSpider/index.html"><span class="ui-icon ui-icon-gear"></span>MindMap</a></li>
		<li class="ui-state-disabled"><a id="app3" href="/AgileSpider/planning"><span class="ui-icon ui-icon-calculator"></span>Planning</a></li>
	</ul>
	<div id="M1" class="container">
		<div id="c1" class="column">
			<div class="titre_col">To Do</div>
			<%= planning.loadingUS("c1") %>
		</div>

		<div id="c2" class="column">
			<div class="titre_col"> In Progress</div>
			<%= planning.loadingUS("c2") %>
		</div>

		<div id="c3" class="column">
			<div class="titre_col">Done</div>
			<%= planning.loadingUS("c3") %>
		</div>
		<button id="b2" onclick="javascript: location.reload(); return false;">Actualiser</button>
		<button id="b3" onclick="javascript: alert('not implemented yet'); return false;">Lancer les Tests</button>
		<button id="ba">Planning</button>
	</div>
</body>
</html>